<template>
<div class="bar"  >
    <div class="header">
        <span class="h-left" @click="isshow = ! isshow">ME</span>
        <span class="h-conent">{{title}}</span>
        <div class="h-right">
          <router-link to="/login" class="geren">个人</router-link>
          <span>深圳</span>
        </div>
    </div>
      
      <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
       <div class="left-side1" v-show="isshow" @click="isshow = ! isshow"></div>
       </transition>
    <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
		   <nav class="left-side" v-if="isshow" @click="isshow = ! isshow" >
          <li><a href="">首页<span>></span></a></li>
          <li><router-link to="/yingyuan">影片<span>></span></router-link></li>
          <li><router-link to="/cinema">影院<span>></span></router-link></li>
          <li><a href="">首页<span>></span></a></li>
          <li><a href="">首页<span>></span></a></li>
          <li><a href="">首页<span>></span></a></li>
          <li><a href="">首页<span>></span></a></li>
	      </nav>
      </transition>

   </div>
</template>
<script>
export default {
  data(){
    return{
      isshow:false
    }
  },
  methods:{
  		dainji:function(){
  			console.log("dianjile")
  		}
  	
  },
  computed:{
    title:function(){
      return this.$store.state.title;
    }
  }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}

.header{
  width: 100%;
  height:50px;
  background: #282828;
  position: fixed;
  top:0;
  left: 0;
  display: flex;
  z-index: 10;
 }
 .h-left{
    float:left;
    width:50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
   
 }
 .h-conent{
   flex: 1;
   color:#fff;
   line-height: 50px;
   font-size: 16px;
 }
 .h-right{
   float:right;
   width: 100px;
   height: 50px;
   
   
 }
 .h-right>span{
    float: right;
    width:50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
 }
 .geren{
   color: #fff;
   float: right;
    width:50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
 }

 .left-side{
   color: #fff;
   list-style: none;
   background: #282828;
   position: fixed;
   top:50px;
   left:0;
   right: 100px;
   bottom: 0;
   box-shadow: 0 1px 1px #363636 inset;
   z-index: 10;
    
 }
 .left-side1{
  background: rgba(0,0,0,0.5);
   position: fixed;
   top:50px;
   left:0;
   right: 0;
   bottom: 0;
   z-index: 9;
 }
 .left-side li{
   line-height: 50px;
 }
  .left-side li a{
    text-decoration:none;
    outline: none ;
    color: #fff;
    display: block;
    width: 100%;
    padding:0 16px;
    border-bottom:1px dotted #333;
    box-sizing: border-box;
  }
 .left-side li a span{
      float: right;
      margin-right: 10px;
      width: 50px;
      text-align: center;
      vertical-align:inherit;

 }
</style>